<template>
  <div class="home">
    <header>
      <div class="header">
        <i class="location van-icon van-icon-location">
          <!---->
        </i>
        <h1 @click="goReciving">麓谷企业广场</h1>
        <i class="triangle van-icon van-icon-play">
          <!---->
        </i>
      </div>

      <div
        class="search"
        @click="goSarch"
      >
        <van-sticky :offset-top="0">
          <van-search
            placeholder="搜索饿了么商家、商品名称"
            v-model="value"
          />
        </van-sticky>
      </div>

      <section>
        <!-- 轮播图 -->
        <div class="lunbo">
          <van-swipe indicator-color="white">
            <van-swipe-item>
              <div class="lunbo1">
                <van-grid
                  square
                  :border="false"
                >
                  <van-grid-item
                    v-for="item in homeTopList1"
                    :key="item.position"
                    :icon="`https://cube.elemecdn.com/${item.image_hash}.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed`"
                    :text="item.name"
                  />
                </van-grid>
              </div>
            </van-swipe-item>

            <van-swipe-item>
              <div class="lunbo1">
                <van-grid
                  square
                  :border="false"
                >
                  <van-grid-item
                    v-for="item in homeTopList2"
                    :key="item.position"
                    :icon="`https://cube.elemecdn.com/${item.image_hash}.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed`"
                    :text="item.name"
                  />
                </van-grid>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>

        <div class="content">
          <div class="top">
            <div class="banner">
              <h3>品质套餐</h3>
              <p class="eat">搭配齐全吃得好</p>
              <p class="buy">立即抢购 ></p>
              <img src="https://cube.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?x-oss-process=image/format,webp/resize,w_282,h_188,m_fixed" />
            </div>
          </div>

          <div>
            <van-divider :style="{ color: '#000', borderColor: '#000', padding: '0 106px' }">推荐商家</van-divider>
          </div>

          <!-- 下拉菜单以及固定头部 -->
          <!-- <van-tabs v-model="active" sticky> -->
          <van-sticky :offset-top="54">
            <!-- <van-button type="info">吸顶距离</van-button> -->
            <van-row class="DropdiwnMenu">
              <van-col span="6">
                <van-dropdown-menu>
                  <van-dropdown-item
                    v-model="value1"
                    :options="option1"
                  />
                </van-dropdown-menu>
              </van-col>

              <van-col
                span="6"
                @click="sortDistance"
              >
                <div>距离最近</div>
              </van-col>

              <van-col
                span="6"
                @click="getRestaurantList"
              >
                <div>综合排序</div>
              </van-col>

              <van-col span="6">
                <van-dropdown-menu>
                  <van-dropdown-item
                    v-model="value2"
                    :options="option2"
                  />
                </van-dropdown-menu>
              </van-col>
            </van-row>
          
          
          </van-sticky>
          <!-- </van-tabs> -->

          <div class="cartList">
            <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <van-cell v-for="(item) in restaurantList" :key="item.authentic_id"> -->
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell
                v-for="(item) in restaurantList"
                :key="item.authentic_id"
              >

                <div slot="title">
                  <van-card
                    :title="item.name"
                    :thumb="`https://cube.elemecdn.com/${item.image_path}?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed`"
                    @click="goDetail(item.act_tag)"
                    @load="onLoad"
                  >

                    <div slot="tags">
                      <div>
                        <van-rate
                          v-model="item.rating"
                          size="10px"
                          disabled
                          disabled-color="#ffd21e"
                          allow-half
                        />
                        &nbsp;
                        <div class="comment">{{item.rating}}</div>
                        &nbsp;
                        <div class="sellNum">月售{{item.recent_order_num}}单</div>
                        &nbsp;
                        <van-tag
                          class="fly-bird"
                          color='#0af'
                          v-show="item.delivery_mode.text"
                        >{{item.delivery_mode.text}}</van-tag>
                      </div>

                      <div class="give">
                        <div>
                          <span>￥{{item.piecewise_agent_fee.rules[0].price}}起送&nbsp;|&nbsp;</span>
                          <span>{{item.piecewise_agent_fee.tips}}</span>
                        </div>

                        <div>
                          <span>{{item.distance/1000}}km&nbsp;|&nbsp;</span>
                          <span>{{item.order_lead_time}}分钟</span>
                        </div>
                      </div>

                      <div class="sign">
                        <van-tag
                          plain
                          v-for="(sign,index) in item.flavors"
                          :key="index"
                        >
                          {{sign.name}}
                        </van-tag>
                      </div>

                      <div class="activity">
                        <div class="activityStyle">
                          <p
                            v-for="(activity,index) in item.activities"
                            :key="index"
                          >
                            <van-tag
                              :color="'#'+activity.icon_color"
                              text-color="#fff"
                            >{{activity.icon_name}}</van-tag>
                            {{activity.description}}
                          </p>
                        </div>
                        <div class="activityNum">{{item.activities.length}}个活动</div>
                      </div>
                    </div>
                  </van-card>
                </div>
              </van-cell>
            </van-list>
          </div>

          <div class="cartList2">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell
                v-for="(item) in restaurantList2"
                :key="item.authentic_id"
              >

                <div slot="title">
                  <van-card
                    :title="item.name"
                    :thumb="`https://cube.elemecdn.com/${item.image_path}?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed`"
                    @click="goDetail(item.act_tag)"
                    @load="onLoad"
                  >
                    <div slot="tags">
                      <div>
                        <van-rate
                          v-model="item.rating"
                          size="10px"
                          disabled
                          disabled-color="#ffd21e"
                          allow-half
                        />&nbsp;
                        <div class="comment">{{item.rating}}</div>&nbsp;
                        <div class="sellNum">月售{{item.recent_order_num}}单</div>&nbsp;
                        <van-tag
                          class="fly-bird"
                          color="#0af"
                          v-show="item.delivery_mode.text"
                        >{{item.delivery_mode.text}}</van-tag>
                      </div>

                      <div class="give">
                        <div>
                          <span>￥{{item.piecewise_agent_fee.rules[0].price}}起送&nbsp;|&nbsp;</span>
                          <span>{{item.piecewise_agent_fee.tips}}</span>
                        </div>

                        <div>
                          <span>{{item.distance/1000}}km&nbsp;|&nbsp;</span>
                          <span>{{item.order_lead_time}}分钟</span>
                        </div>
                      </div>

                      <div class="sign">
                        <van-tag
                          plain
                          v-for="(sign,index) in item.flavors"
                          :key="index"
                        >{{sign.name}}</van-tag>
                      </div>

                      <div class="activity">
                        <div class="activityStyle">
                          <p
                            v-for="(activity,index) in item.activities"
                            :key="index"
                          >
                            <van-tag
                              :color="'#'+activity.icon_color"
                              text-color="#fff"
                            >{{activity.icon_name}}</van-tag>
                            {{activity.description}}
                          </p>
                        </div>
                        <div class="activityNum">{{item.activities.length}}个活动</div>
                      </div>
                    </div>
                  </van-card>
                </div>
              </van-cell>
            </van-list>
          </div>

          <!-- 弹出层 -->
          <van-popup
            v-model="reciving"
            position="right"
            :closeable="flag"
          >
          </van-popup>

          <!-- </van-popup> -->
          <van-popup
            v-model="reciving"
            position="right"
            :closeable="flag"
          />

          <!-- 这应该是一个插槽 -->
          <reciving
            :reciving="reciving"
            @change-reciving="changeReciving"
          ></reciving>

          <!-- 回到顶部 -->
          <div
            class="backTop"
            @click="backTop"
            v-show="btnFlag"
          >
            <van-icon
              name="upgrade"
              size="50px"
            />
          </div>
        </div>
      </section>
    </header>
    <div class="tarbar">
      <van-tabbar
        v-model="active"
        fixed
      >
        <van-tabbar-item
          icon="home-o"
          to="/home"
        >首页</van-tabbar-item>
        <van-tabbar-item
          icon="browsing-history-o"
          to="/find"
        >发现</van-tabbar-item>
        <van-tabbar-item
          icon="orders-o"
          to="/order"
        >订单</van-tabbar-item>
        <van-tabbar-item
          icon="setting-o"
          to="/mine"
        >我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { log } from "util";
import Reciving from "../../components/reciving";
import Tarbar from '../../components/tabbar'
export default {
  data: () => ({
    active: 0,
    value: "",
    homeTopList1: [],
    homeTopList2: [],
    restaurantList: [],
    restaurantList2: [],
    idList: [],
    btnFlag: false,
    flag: true,
    reciving: false,
    value1: 0,
    value2: "a",
    option1: [
      { text: "通用排序", value: 0 },
      { text: "好评优先", value: 1 },
      { text: "销量最高", value: 2 },
      { text: "起送价最低", value: 3 },
      { text: "配送最快", value: 4 },
      { text: "配送费最低", value: 5 },
      { text: "人均从低到高", value: 6 },
      { text: "人均从高到低", value: 7 },
      { text: "综合排序", value: 8 }
    ],
    option2: [
      { text: "商家服务", value: "a" },
      { text: "优惠活动", value: "b" },
      { text: "人均消费", value: "c" }
    ],
    list: [],
    loading: false,
    finished: false
  }),
  created() {
    this.getHomeTop();
    this.getRestaurantList();
  },
  // vue的两个生命钩子，这里不多解释。
  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
  methods: {
    async getHomeTop() {
      const {
        data: { message, status }
      } = await this.$axios.get("api/gethometop");
      if (status !== 1) return console.log(status);
      this.homeTopList1 = message[0].entries.slice(0, 10);
      this.homeTopList2 = message[0].entries.slice(10, 14);
    },
    async getRestaurantList() {
      this.restaurantList = [];
      const {
        data: { items }
      } = await this.$axios.get("/api/getrestaurant");
      items.forEach(item => {
        if (item.restaurant.delivery_mode === undefined) {
          item.restaurant.delivery_mode = { text: "" };
        }
        this.restaurantList.push(item.restaurant);
        var cartList = document.querySelector(".cartList");
        var cartList2 = document.querySelector(".cartList2");
        cartList2.style.display = "none";
        cartList.style.display = "block";
      });
      this.idList = items;
    },
    //根据距离进行排序
    sortDistance() {
      var cartList = document.querySelector(".cartList");
      var cartList2 = document.querySelector(".cartList2");
      var arr = this.restaurantList;
      if (arr.length < 25) return;
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].distance > arr[j].distance) {
            var tmp = arr[j];
            arr[j] = arr[i];
            arr[i] = tmp;
          }
        }
      }
      this.restaurantList2 = arr;
      cartList.style.display = "none";
      cartList2.style.display = "block";
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    goDetail(id) {
      var user=JSON.parse(localStorage.getItem('user'))
      // if(user!=null){
      //   this.$router.push("/home/goodinfo/" + id);
      // }else{
      //   this.$Toast("请登录")
      // }
      this.$router.push("/home/goodinfo/" + id)

    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 10) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    //弹出层
    goReciving() {
      this.reciving = true;
    },
    changeReciving(data) {
      // console.log(data);
      this.reciving = data;
    },
    goSarch() {
      this.$router.push("/home/search");
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  components: {
    Reciving,
    // Tarbar
  }
}
</script>
<style lang="less" scoped>
.home {
  background: #fff !important;
  header .header {
    height: 35px;
    padding: 10px 14px 0px;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    color: #fff;
    display: flex;
    align-items: center;
    .location {
      font-size: 17px;
    }
    .triangle {
      transform: rotate(90deg);
      font-size: 12px;
    }
    .van-icon {
      display: inline-block;
    }
    h1 {
      font-size: 17px;
      margin: 0 3px;
      line-height: 35px;
    }
  }
  header .search .van-search {
    background-image: linear-gradient(90deg, #0af, #0085ff) !important;
    .van-search__content {
      background-color: #fff;
      padding-left: 70px;
    }
  }

  section {
    margin-bottom: 50px;
    .lunbo {
      /deep/.van-swipe__indicator--active{
        background-color: #0085ff !important;
      }
      /deep/.van-swipe__indicators{
        bottom: 0px !important;
      }
      /deep/.van-swipe__indicator{
        background-color: #888;
      }
      .van-swipe {
        .lunbo1 {
          .van-grid {
            flex: 1;
            .van-grid-item {
              flex-basis: 20% !important;
              padding-top: 24% !important;
              border-radius: none;
            }
          }
        }
      }
    }

    .content {
      padding: 0 12px;
      .top {
        background: linear-gradient(0deg, #f4f4f4 5%, #fafafa 95%);
        margin: 10px 0px 8px 0px;
        .banner {
          padding: 10px;
          position: relative;
          h3 {
            font-size: 17px;
            padding: 0;
            margin: 0;
          }
          .eat {
            color: #777;
            font-size: 16px;
            padding: 0;
            margin-top: 4px;
            margin-bottom: 10px;
          }
          .buy {
            font-size: 12px;
            font-weight: bold;
            color: #af8260;
            padding: 0;
            margin-top: 0;
            margin-bottom: 30px;
          }
          img {
            width: 142px;
            position: absolute;
            right: 16px;
            top: 14px;
          }
        }
      }

      /deep/.DropdiwnMenu {
        font-size: 12px !important;
        line-height: 50px;
        text-align: center;
        background: #fff;
        /deep/.van-col .van-ellipsis {
          font-size: 12px !important;
        }
      }

      .cartList {
        /deep/.van-cell {
          padding: 0px 0px !important;
          /deep/.van-card {
            background-color: #fff;
            /deep/.van-card__title {
              font-weight: bold;
              font-size: 14px;
            }
            /deep/.van-rate {
              margin-right: 8px;
            }
            /deep/.fly-bird {
              margin-left: 10px;
            }
            /deep/.van-card__thumb {
              width: 64px;
              height: 64px;
              /deep/.van-image img {
                width: 64px;
                height: 64px;
              }
            }
            .comment {
              display: inline-block;
              color: #888;
            }
            .sellNum {
              display: inline-block;
              margin-left: 10px;
              color: #888;
            }
            .give {
              display: flex;
              justify-content: space-between;
              color: #888;
            }
            .sign {
              .van-tag {
                margin-right: 6px;
              }
            }
            .activity {
              display: flex;
              justify-content: space-between;
              color: #888;
              .activityNum {
                display: inline-block;
              }
              .activityStyle {
                width: 194px;
                p {
                  padding: 0;
                  margin: 4px 0px 0px 0px;
                }
              }
            }
          }
        }
      }

      .cartList2 {
        /deep/.van-cell {
          padding: 0px 0px !important;
          /deep/.van-card {
            background-color: #fff;
            /deep/.van-card__title {
              font-weight: bold;
              font-size: 14px;
            }
            /deep/.van-rate {
              margin-right: 8px;
            }
            /deep/.fly-bird {
              margin-left: 10px;
            }
            /deep/.van-card__thumb {
              width: 64px;
              height: 64px;
              /deep/.van-image img {
                width: 64px;
                height: 64px;
              }
            }
            .comment {
              display: inline-block;
              color: #888;
            }
            .sellNum {
              display: inline-block;
              margin-left: 10px;
              color: #888;
            }
            .give {
              display: flex;
              justify-content: space-between;
              color: #888;
            }
            .sign {
              .van-tag {
                margin-right: 6px;
              }
            }
            .activity {
              display: flex;
              justify-content: space-between;
              color: #888;
              .activityNum {
                display: inline-block;
              }
              .activityStyle {
                width: 194px;
                p {
                  padding: 0;
                  margin: 4px 0px 0px 0px;
                }
              }
            }
          }
        }
      }
      .backTop {
        position: fixed;
        right: 10px;
        background: #ccc;
        width: 50px;
        height: 50px;
        color: #fff;
        bottom: 55px;
        border-radius: 50%;
      }
    }
  }
}
</style>